<template>
	<view class="content">
		<uni-section title="设备信息" type="line">
			<uni-list>
				<uni-list-item title="设备名称" :rightText="deviceInfoRes.deviceName" />
				<uni-list-item title="安装时间" :rightText="deviceInfoRes.createTime | dateFomatterYYYYMMDD" />
				<uni-list-item title="备注" :rightText="deviceInfoRes.remark" />
				<uni-list-item title="设备IMEI">
					<template v-slot:footer>
						<view class="flexrowcenter" @click="setClip">
							<text class="text-sm text-gray">{{ deviceInfoRes.id }}</text>
							<image class="icon-small" style="margin-left: 10rpx" src="@/static/images/common/imei-copy.png"></image>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item title="现场照片">
					<template v-slot:footer>
						<view class="flexrowcenter">
							<!-- 外面最多3张 -->
							<image class="icon-pic" v-for="(sceneImgurl, sceneImgindex) in sceneImg" :key="sceneImgindex" :src="sceneImgurl" />
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-section>
		<uni-section title="建筑物" type="line" style="margin-top: 20rpx">
			<uni-list-item title="名称">
				<template v-slot:footer>
					<view class="flexrowcenter">
						<text class="text-sm text-blue">{{ buildingResp.buildingName }}</text>
					</view>
				</template>
			</uni-list-item>
			<uni-list-item title="地址" :rightText="buildingResp.address" />
			<uni-list-item title="类型" :rightText="buildingType" />
			<uni-list-item title="组织单位" :rightText="buildingResp.deptName" />
		</uni-section>
		<uni-section title="厂家信息" type="line" style="margin-top: 20rpx">
			<uni-list-item title="设备厂家" :rightText="productDO.productFactory" />
			<uni-list-item title="设备型号" :rightText="productDO.productModel" />
			<uni-list-item title="联网方式" :rightText="productDO.networkFlag | networkFlagDes" />
			<uni-list-item title="产品名称" :rightText="productDO.productName" />
		</uni-section>

		<view class="button-container">
			<button class="button1" v-if="auth('thing:building-device:delete')" @click="updateDevice">更新设备</button>

			<button class="button" style="margin-top: 20px" v-if="auth('thing:building-device:delete')" @click="deleteDevice">删除设备</button>
		</view>
	</view>
</template>

<script>
import config from '@/config';
import { getInstanceInfo } from '@/api/devices/index';
import dayjs from 'dayjs';
import authMixin from '@/mixin/auth.js';
import { deviceDelete } from '@/api/devices/index';
export default {
	mixins: [authMixin],
	data() {
		return {
			query: {},
			sceneImg: [],
			buildingType: '',
			buildingResp: {},
			deviceInfoRes: {},
			productDO: {},
			dictMap: this.$store.state.dict.dictMap,
			inputtitle: '',
			inputdes: '',
			deviceId: ''
		};
	},
	filters: {
		dateFomatterYYYYMMDD(date) {
			return date ? dayjs(date).format('YYYY-MM-DD HH:mm:ss') : '';
		},
		networkFlagDes(value) {
			return value === 1 ? '4G-DTU' : 'NB-IOT';
		}
	},
	onLoad(query) {
		console.log('query>>>', query);
		this.query = query;
		const { deviceId } = query || {};
		this.deviceId = deviceId;
		this.init();
	},
	methods: {
		init() {
			getInstanceInfo({ deviceId: this.deviceId }).then((res) => {
				console.log('res>>', res);
				const data = res.data;
				const { buildingRespVO, deviceInfoRespVO, productDO } = data;
				this.buildingResp = buildingRespVO;
				this.deviceInfoRes = deviceInfoRespVO;
				this.productDO = productDO;
				console.log(' this.dictMap>>>', this.dictMap);
				const buildingType = this.dicDes(buildingRespVO.buildingType, 'building_type');
				this.buildingType = buildingType;

				uni.setNavigationBarTitle({
					title: this.deviceInfoRes.deviceName
				});

				if (buildingRespVO.sceneImg) {
					const sceneImgArray = buildingRespVO.sceneImg.split(',');
					sceneImgArray.map((itemurl) => {
						return config.imageUrl + itemurl;
					});
					this.sceneImg = sceneImgArray;
				}
			});
		},
		updateDevice() {
			const { deviceId } = this.query || {};
			uni.navigateTo({
				url: '/pages/devices/detailupdate/index?deviceId=' + deviceId
			});
			uni.$once('refresh-devices-details', () => {
				this.init();
			});
		},
		deleteDevice() {
			const deviceId = this.query.deviceId;
			uni.showModal({
				title: '提示',
				content: '确定删除该设备吗',
				success: function (res) {
					if (res.confirm) {
						deviceDelete({
							deviceId: deviceId
						}).then((res) => {
							uni.showToast({
								title: '删除设备成功'
							});
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/home/index'
								});
							}, 1000);
						});
					}
				}
			});
		},
		setClip() {
			uni.setClipboardData({
				data: this.deviceInfoRes.id,
				success: function () {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					});
				}
			});
		},
		dicDes(value, type) {
			let label = '';
			const alarm_type = this.dictMap[type] || [];
			alarm_type.map((item) => {
				if (item.value == value) {
					label = item.label;
				}
			});
			return label;
		}
	}
};
</script>

<style>
page {
	height: 100%;
}

.content {
	background-color: #f5f6f7;
}

.icon-small {
	height: 30rpx;
	width: 30rpx;
}
.icon-pic {
	height: 70rpx;
	width: 70rpx;
	margin-left: 5rpx;
	margin-right: 5rpx;
}
.button-container {
	margin-bottom: 40px;
	margin-top: 40px;
}
.button {
	width: 700rpx;
	margin-right: 25rpx;
	margin-left: 25rpx;
	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
	border-radius: 5px;
	color: #ffffff;
	background-color: #ef8b87;
}
.button1 {
	width: 700rpx;
	margin-right: 25rpx;
	margin-left: 25rpx;

	height: 50px;
	text-align: center;
	line-height: 50px;
	font-size: 16px;
	border-radius: 5px;
	color: #ffffff;
	background-color: #0081ff;
}
</style>
